<!--
 * @Author: zhangpeng
 * @Date: 2024-11-22 16:57:31
 * @FilePath: \scientific_research_manager_web\src\views\resultsManagement\components\ResultAuditRecordTable.vue
 * @LastEditTime: 2025-01-14 13:41:32
 * @Description: 成果审核记录表格
-->
<script setup lang="ts">
import { AuditLogResultColorMap, AuditLogResultMap } from '@/utils/constText'
import { auditLogApi } from '@/api/resultsManagement/index'
import { ApprovalPageRespVO } from '@/types/resultsManagement'
import formateDate from '@/utils/formateDate';

const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})

const tableData = ref([])
// 查询审核日志
const { runAsync: getAuditLog, loading: logLoading } = useRequest(auditLogApi, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: (response: any) => {
    tableData.value = response
  },
  // 请求失败
  onError: () => {
  },
})


onMounted(() => {
  getAuditLog({ logId: props?.id })
})

</script>

<template>
  <div class="record">
    <div class="record-title">
      审核记录
    </div>
    <div>
      <el-table :data="tableData" :auto-height="true" border :loading="logLoading" stripe>
        <el-table-column type="index" label="序号" width="70" />

        <el-table-column props="updatedTime" label="操作时间">
          <template #default="scope">
            <span>{{ scope.row?.updatedTime  ? formateDate(scope.row?.updatedTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column props="typeName" label="节点">
          <template #default="scope">
            <span>{{ scope.row?.typeName }}</span>
          </template>
        </el-table-column>

        <el-table-column props="updatedByName" label="操作人">
          <template #default="scope">
            <span>{{ scope.row?.updatedByName }}</span>
          </template>
        </el-table-column>

        <el-table-column props="status" label="操作结果">
          <template #default="scope">
            <div class="status-box">
              <div
                class="status-dot"
                :style="`background-color: ${AuditLogResultColorMap[scope.row.status]}`"
              />
              <div
                class="status-text"
                :style="`color: ${AuditLogResultColorMap[scope.row.status]}`"
              >
                {{ scope.row.statusName }}
              </div>
            </div>
          </template>

        </el-table-column>

        <el-table-column props="attachmentFileInfoDTOList" label="审核">
          <template #default="scope">
            <div v-if="scope.row?.type !== 2 && scope.row?.type !== 3">-</div>
            <div v-else>
              <div class="record-msg">
                <span class="flex-none">审核意见：</span>
                <span>{{ scope.row?.description }}</span>
              </div>
              <div class="record-msg">
                <span class="flex-none">相关附件：</span>
                <span>
                  <span v-for="file in scope.row?.attachmentFileInfoDTOList" :key="file?.id">
                    <FilePreviewItem :file="file"></FilePreviewItem>
                  </span>
                </span>
              </div>
            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>

<style scoped lang="scss">
.record {
  height: auto;
  background-color: white;

  .record-title {
    height: 20px;
    font-weight: bold;
    color: #1D2129;
    font-size: 14px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;

    :deep(.el-button) {
      height: 32px;
    }
  }

  :deep(.el-form-item) {
    margin-bottom: 0px;
  }

  :deep(.el-table .cell) {
    overflow: visible;
  }
}

.status-box {
  display: flex;
  align-items: center;
  flex-direction: row;

  .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    margin-right: 8px;
  }

  .status-text {
    width: calc(100% - 14px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.record-msg {
  --at-apply: flex flex-start leading-[22px];
}
</style>